<!DOCTYPE html>
<html>
<body>
<canvas id="physics_canvas" width="500" height="420"></canvas>
<script>
    const canvas = document.getElementById('physics_canvas');
    const ctx = canvas.getContext('2d');

    // Styles
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '16px Arial';
    ctx.fillStyle = 'black';

    // --- Main Components ---

    // Tank
    ctx.beginPath();
    ctx.moveTo(100, 350);
    ctx.lineTo(100, 300);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(100, 350);
    ctx.lineTo(400, 350);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(400, 350);
    ctx.lineTo(400, 300);
    ctx.stroke();

    // Vertical Tube
    ctx.beginPath();
    ctx.moveTo(240, 360); // extend below liquid surface
    ctx.lineTo(240, 100);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(260, 360);
    ctx.lineTo(260, 100);
    ctx.stroke();

    // Liquid
    ctx.fillStyle = '#D3D3D3';
    // Liquid in tank (left)
    ctx.fillRect(101, 300, 139, 50);
    // Liquid in tank (right)
    ctx.fillRect(261, 300, 139, 50);
    // Liquid in tube
    ctx.fillRect(241, 120, 18, 240);


    // --- Pump and Hose ---

    // Pump Box
    ctx.strokeRect(360, 40, 120, 70);

    // Hose
    ctx.lineWidth = 2;
    // Outer hose line
    ctx.beginPath();
    ctx.moveTo(258, 100);
    ctx.quadraticCurveTo(308, 35, 360, 65);
    ctx.stroke();
    // Inner hose line
    ctx.beginPath();
    ctx.moveTo(242, 100);
    ctx.quadraticCurveTo(292, 45, 360, 75);
    ctx.stroke();

    // --- Labels and Annotations ---

    // Height Dimension Line
    const dimX = 80;
    const topY = 120;
    const bottomY = 300;
    
    // Dashed lines for height reference
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.setLineDash([5, 3]);
    ctx.beginPath();
    ctx.moveTo(dimX, topY);
    ctx.lineTo(240, topY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(dimX, bottomY);
    ctx.lineTo(240, bottomY);
    ctx.stroke();
    ctx.restore();

    // Vertical dimension line
    ctx.beginPath();
    ctx.moveTo(dimX, topY);
    ctx.lineTo(dimX, bottomY);
    ctx.stroke();
    // Arrowhead top
    ctx.beginPath();
    ctx.moveTo(dimX, topY);
    ctx.lineTo(dimX - 5, topY + 8);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(dimX, topY);
    ctx.lineTo(dimX + 5, topY + 8);
    ctx.stroke();
    // Arrowhead bottom
    ctx.beginPath();
    ctx.moveTo(dimX, bottomY);
    ctx.lineTo(dimX - 5, bottomY - 8);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(dimX, bottomY);
    ctx.lineTo(dimX + 5, bottomY - 8);
    ctx.stroke();

    // Text "12 m"
    ctx.textAlign = 'right';
    ctx.fillText('12 m', dimX - 10, (topY + bottomY) / 2 + 6);

    // Text: "vacuum pump"
    ctx.textAlign = 'center';
    ctx.fillStyle = 'black';
    ctx.fillText('vacuum', 420, 65);
    ctx.fillText('pump', 420, 85);

    // Label: "liquid"
    ctx.textAlign = 'left';
    ctx.fillText('liquid', 340, 270);
    ctx.beginPath();
    ctx.moveTo(340, 275);
    ctx.lineTo(325, 295);
    ctx.stroke();

    // Label: "point X"
    ctx.textAlign = 'left';
    ctx.fillText('point X', 300, 220);
    ctx.beginPath();
    ctx.moveTo(320, 225);
    ctx.lineTo(265, 295);
    ctx.stroke();

    // Caption
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 1.2 (not to scale)', 250, 400);

</script>
</body>
</html>